<template>
  <div class="compareIcon-root">
    <div class="main">
      <div v-if="compare>=0" class="up-icon up-scroll">
        <img class="icon" src="./img/004.png" alt="" srcset="">
        <!-- <img class="icon" src="@/assets/img3/004.png" alt="" srcset=""> -->
      </div>
      <div v-if="compare<0" class="up-icon down-scroll">
        <img class="icon" src="./img/005.png" alt="" srcset="">
        <!-- <img class="icon" src="@/assets/img3/005.png" alt="" srcset=""> -->
      </div>
      <span v-if="compare<0" class="fs14" :style="`color:${fontColorDown}`">{{compare.toString().slice(1,compare.length)}}%</span>
      <span v-else class="fs14" :style="`color:${fontColorUp}`">{{compare}}%</span>
    </div>
  </div>
</template>

<script>
import { tbCompute } from '@/utils/assist.js';

export default {
  name: "compareIcon",
  components: {},
  props:{
    nowNum:{
      type: Number,
      default: 0,
    },
    compareNum:{
      type: Number,
      default: 0,
    },
    fontColorUp:{
      type: String,
      default: '#FF3737',
    },
    fontColorDown:{
      type: String,
      default: '#17B81B',
    }
  },
  data() {
    return {
    }
  },
  computed:{
    compare(){
      // console.log(this.nowNum, this.compareNum)
      return tbCompute(this.nowNum, this.compareNum)
    }
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.compareIcon-root {
  display: inline-block;
  vertical-align: middle;
  // overflow: hidden;
  height: 14px;
  .main{
    display: flex;
    // justify-content: center;
    align-items: flex-start;
    span{
      line-height: 14px;
    }
  }
  .up-icon{
    display: inline-block;
    // vertical-align: top;
    margin:0 2px;
    // display: flex;
    // flex-direction: column;
    .icon{
      display: block;
      height:14px !important;
    }
  }
  .up-scroll{
    // 箭头向上循环混动动画
    animation: myBreath 1s ease-in-out infinite;
    position: relative;
    @keyframes myBreath {
      0% {
        top: 0;
        // transform: translateY(0);
      }
      100% {
        top: -4.8px
        // top: -0.88rem;
        // transform: translateY(-0.88rem);
      }
    }
  }
  .down-scroll{
    // 箭头向上循环混动动画
    animation: myBreath_down 1s ease-in-out infinite;
    position: relative;
    @keyframes myBreath_down {
      0% {
        top: 0;
        // transform: translateY(0);
      }
      100% {
        top: 4.8px;
        // top: 0.88rem;
        // transform: translateY(0.88rem);
      }
    }
  }
}
</style>
